---
title: Components
---

<div class="refills-components">

  <a class="js-menu-trigger-refills refills-menu-anchor fixedsticky">
    <%= partial "svgs/menu_icon" %>
  </a>
  <div class="js-menu-screen-refills refills-menu-screen"></div>

  <%= partial "refills-hero" %>
  <%= partial "refills-menu" %>

  <div id="example">

    <section id="accordion" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Accordion</h6></div>
        <div class="refill-centering"><%= partial "accordion" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("accordion") %></div>
    </section>

    <section id="animate" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Animate</h6></div>
        <div class="refill-centering">
          <%= partial "animate" %>
          <%= partial "animate_info" %>
        </div>
      </div>
      <div class="refill-snippet"><%= code_for("animate") %></div>
    </section>

    <section id="badges" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Badges</h6></div>
        <div class="refill-centering"><%= partial "badges" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("badges") %></div>
    </section>

    <section id="breadcrumbs" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Breadcrumbs</h6></div>
        <div class="refill-centering"><%= partial "breadcrumbs" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("breadcrumbs") %></div>
    </section>

    <section id="button-group" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Button Group</h6></div>
        <div class="refill-centering"><%= partial "button_group" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("button_group") %></div>
    </section>

    <section id="dropdown" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Dropdown</h6></div>
        <div class="refill-centering">
          <%= partial "dropdown" %>
        </div>
      </div>
      <div class="refill-snippet"><%= code_for("dropdown") %></div>
    </section>

    <section id="expander" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Expander</h6></div>
        <div class="refill-centering">
          <%= partial "expander" %>
        </div>
      </div>
      <div class="refill-snippet"><%= code_for("expander") %></div>
    </section>

    <section id="fade-in" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Fade In</h6></div>
        <div class="refill-centering">
          <div class="refill-smaller"><%= partial "fade_in" %></div>
        </div>
      </div>
      <div class="refill-snippet"><%= code_for("fade_in") %></div>
    </section>

    <section id="flashes" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Flashes</h6></div>
        <div class="refill-centering"><%= partial "flashes" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("flashes") %></div>
    </section>

    <section id="hover-tile-animation" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Hover Tile Animation</h6></div>
        <div class="refill-centering"><%= partial "hover_tile_animation" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("hover_tile_animation") %></div>
    </section>

    <section id="image-gradient" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Image with gradient overlays</h6></div>
        <div class="refill-centering"><%= partial "image_gradient_dynamic" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("image_gradient_dynamic") %></div>
    </section>

    <section id="modal" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Modal</h6></div>
        <div class="refill-centering"><%= partial "modal" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("modal") %></div>
    </section>

    <section id="pagination" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Pagination</h6></div>
        <%= partial "pagination" %>
      </div>
      <div class="refill-snippet"><%= code_for("pagination") %></div>
    </section>

    <section id="parallax" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Parallax</h6></div>
        <%= partial "parallax" %>
      </div>
      <div class="refill-snippet"><%= code_for("parallax") %></div>
    </section>

    <section id="progress-bar" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Progress Bars</h6></div>
        <div class="refill-centering">
          <div class="refill-smaller"><%= partial "progress_bar" %></div>
        </div>
      </div>
      <div class="refill-snippet"><%= code_for("progress_bar") %></div>
      <div class="refills-wrapper">
        <div class="refill-centering">
          <div class="refill-smaller"><%= partial "progress_bar_indication" %></div>
        </div>
      </div>
      <div class="refill-snippet"><%= code_for("progress_bar_indication") %></div>
    </section>

    <section id="ribbon" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Ribbon</h6></div>
        <div class="refill-centering">
          <%= partial "ribbon" %>
        </div>
      </div>
      <div class="refill-snippet"><%= code_for("ribbon") %></div>
    </section>

    <section id="video" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Responsive Video Embed</h6></div>
        <%= partial "video" %>
      </div>
      <div class="refill-snippet"><%= code_for("video") %></div>
    </section>

    <section id="search-bar" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Search bar</h6></div>
        <div class="refill-centering">
          <div class="refill-smaller"><%= partial "search_bar" %></div>
        </div>
      </div>
      <div class="refill-snippet"><%= code_for("search_bar") %></div>
    </section>

    <section id="sliding-panel" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Sliding Panel</h6></div>
        <div class="refill-centering"><%= partial "sliding_panel" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("sliding_panel") %></div>
    </section>

    <section id="switch" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Switch</h6></div>
        <div class="refill-centering"><%= partial "switch" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("switch") %></div>
    </section>

    <section id="stats" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Stats</h6></div>
        <div class="refill-centering"><%= partial "stats" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("stats") %></div>
    </section>

    <section id="textures" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Textures</h6></div>
        <%= partial "texture-legend" %>
        <%= partial "textures" %>
      </div>
      <div class="refill-snippet"><%= code_for("textures") %></div>
    </section>

    <section id="tooltip" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Tooltip</h6></div>
        <div class="refill-centering"><%= partial "tooltip" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("tooltip") %></div>
    </section>

  </div>
</div>

<%= partial "refills-page-scripts" %>
